<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--
      link:引入外部的css
      rel:定义了css内部的存储结构，是样式表结构，这个必须定义
      type：定义的是引入的文件的类型
      href：引入地址
    -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css"/>
    <style>
        /*.container{*/
            /*background-color: red;*/
        /*}*/
        /*.container-fluid{*/
            /*background-color: hotpink;*/
        /*}*/
        .col-md-2{
            /*
             外边线，既可以显示线条又不会增加盒子的大小
            */
            outline: 1px solid red;
            height: 30px;
        }
        .col-md-4{
            outline: 1px solid blue;
            height: 100px;
        }
    </style>
</head>
<body>
    <!--
       商业网站布局：居中样式   完全占满（跟页面是一样大）
    -->
    <!-- 居中样式-->
      <!--<div class="container">这是一个盒子</div>-->
    <!-- 完全占满-->
      <!--<div class="container-fluid">这是另外一个盒子</div>-->
<!--
   bootstrap栅格布局：
   （1）整体布局要么放在container里面要么放在container-fluid里面
   （2）从上往下，每一部分叫做行，定义class叫做row
   （3）每一行这个boostrap默认是分为12个栅格，col-md-3意思就是占12份中的三个
   用bootstrap搭建导航跟三栏式主要内容部分，要求整体居中
   作业在作业文件夹
-->
    <div class="container">
        <!-- 导航-->
        <div class="row">
            <div class="col-md-2">天猫1</div>
            <div class="col-md-2">天猫2</div>
            <div class="col-md-2">天猫3</div>
            <div class="col-md-2">天猫4</div>
            <div class="col-md-2">天猫5</div>
            <div class="col-md-2">天猫6</div>
        </div>
        <!-- 主要内容-->
        <div class="row">
            <div class="col-md-4">内容1</div>
            <div class="col-md-4">内容2</div>
            <div class="col-md-4">内容3</div>
        </div>
    </div>
</body>
</html>